<template>
  <div class="app-container">
    <el-form class="query-wrapper"  :model="queryParams" >
      <el-form-item  prop="countryCode">
        <el-input v-model="queryParams.countryCode"  style="width:180px" placeholder="Country Code"/>
      </el-form-item>
      &nbsp;&nbsp;
      <el-form-item  prop="countryName">
        <el-input v-model="queryParams.countryName"  style="width: 180px" placeholder="Country Name"/>
      </el-form-item>
      &nbsp;&nbsp;
      <el-form-item  prop="portCode">
        <el-input v-model="queryParams.portCode"  style="width: 180px" placeholder="Port Code"/>
      </el-form-item>
      &nbsp;&nbsp;
      <el-form-item  prop="portName">
        <el-input v-model="queryParams.portName"  style="width: 180px" placeholder="Port Name"/>
        &nbsp;&nbsp; 
        <el-button type="primary"  icon="search" @click="search">{{
          $t("ship.button.search")
        }}</el-button>
        <SearchReset :query-params="queryParams" @reset="resetQuery"></SearchReset> 
       </el-form-item>       
    </el-form>
    <el-row  :gutter="10" class="mb8">
      <el-button type="primary" plain icon="plus" @click="addClickEvent" v-hasPermi="['port:add']">
            {{ $t("ship.button.plus") }}
          </el-button>
          <el-button type="primary" icon="upload" onclick="this.nextSibling.click()"  v-hasPermi="['port:import']">Import</el-button>
          <input
            id="upload-spec-file"
            type="file"
            accept=".xlsx"
            v-show="false"
            @change="uploadFile($event)"
          />
          <el-button type="warning" plain icon="download" v-hasPermi="['port:export']" @click="handleExport" style="margin-left: 12px;">Export</el-button> 
    </el-row>
         
  </div>

  <el-table
    stripe
    class="daf-table"
    :data="listData"
    style="width: 100%"
    @sort-change="handleSortChange"
  >
    <!-- <el-table-column prop="portId" label="Port No" width="120" /> -->
    <el-table-column prop="countryCode" label="Country Code" /> 
    <el-table-column prop="countryName" label="Country Name" /> 
    <el-table-column prop="portCode" label="Port Code" />
    <el-table-column prop="portName" label="Port Name" sortable />
    <el-table-column prop="longitude" label="Longitude"  />
    <el-table-column prop="latitude" label="Latitude"  />
    <!-- <el-table-column prop="subDivision" label="SubDivision" /> -->
    <el-table-column prop="createBy" label="Created By" />
    <el-table-column label="Operation"  v-hasPermi="['port:edit']">
      <template #default="scope">
        <span class="btn-primary" @click="editClickEvent(scope.row)">{{
          $t("ship.button.edit")
        }}</span
        >&nbsp;&nbsp;
        <span class="btn-primary" @click="removeClickEvent(scope.row.portId)">{{
          $t("ship.button.remove")
        }}</span>
      </template>
    </el-table-column>
  </el-table>

  <pagination
    v-show="total > 0"
    :total="total"
    :page="queryParams.pageNum"
    :limit="queryParams.pageSize"
    @pagination="pageQuery"
    style="float: right"
  />

  <el-dialog
    :width="800"
    destroy-on-close
    draggable
    :title="dialogTitle"
    v-model="dialogFormVisible"
  >
    <el-form :model="formParam" :rules="rules" ref="custForm">     
      <el-row>
        <el-col :span="24">
          <el-form-item label="Country Code" label-width="120px" prop="countryCode">
            <el-input v-model="formParam.countryCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="Port Name" label-width="120px" prop="portName" required>
            <el-input v-model="formParam.portName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="Port Code" label-width="120px" prop="portCode">
            <el-input v-model="formParam.portCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
       <el-row>
        <el-col :span="12">
          <el-form-item label="Longitude" label-width="120px" prop="longitude">
            <el-input v-model="formParam.longitude"></el-input>
          </el-form-item>
        </el-col> 
        <el-col :span="12">
          <el-form-item label="Latitude" label-width="120px" prop="latitude">
            <el-input v-model="formParam.latitude"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{
          $t("ship.button.cancel")
        }}</el-button> 
        <el-button type="primary" @click="submitForm">{{
          $t("ship.button.submit")
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup name="port">
import { ref, onMounted, reactive } from "vue";
import { downloadFile } from "@/utils/downloadFile";
import service from "@/utils/request"; 
import { ElNotification, ElMessageBox } from "element-plus"; 
const custForm = ref(null);
const dialogTitle = ref("");
const initForm = {
  portId: null,
  countryName: null,
  countryCode: null,
  portName: null,
  portCode: null,
  longitude: null,
  latitude: null
};
const formParam = reactive(Object.assign({}, initForm));

const total = ref(0);

const rules = ref({
  portName: [{ required: true, message: "Port Name can't be blank" }],
  portCode: [{ required: true, message: "Port Code can't be blank" }],
});

const queryParams = reactive({
  pageNum: 1,
  pageSize: 20,
  countryCode: null,
  countryName: null,
  portName: null,
  portCode: null,
  orderByColumn: undefined,
  isAsc: undefined,
});

let recordData = ref([] as any);
const listData = ref([]);
const refreshTable = async () => {
  let result = await service.get("/shipping/port/getTable", { params: queryParams });
  listData.value = result.data;
  total.value = result.total;
};
const resetQuery = (data) => {
    Object.assign(queryParams, data)
    refreshTable()
}
const dialogFormVisible = ref(false);

const editClickEvent = (row: any) => {
  dialogTitle.value = "Update Port Code";
  dialogFormVisible.value = true;
  isAdd = false;
  Object.keys(initForm).forEach((k) => (formParam[k] = row[k]));
};

let isAdd = false;

const addClickEvent = () => {
  dialogTitle.value = "Add Port Code";
  isAdd = true;
  dialogFormVisible.value = true;
  Object.assign(formParam, initForm);
};

const resetForm = () => {
  // @ts-ignore
  custForm.value.resetFields();
};

const submitForm = () => {
  // @ts-ignore
  custForm.value.validate(async (valid) => {
    if (!valid) {
      // @ts-ignore
      ElNotification.warning({
        title: "Prompt information",
        message: "verification not success！",
        position: "bottom-right",
      });
      return;
    }

    await service[isAdd ? "post" : "put"]("shipping/port", formParam);
    // @ts-ignore
    ElNotification.success({
      title: "Prompt information",
      message: "save successful!",
      position: "bottom-right",
    });
    dialogFormVisible.value = false;
    refreshTable();
  });
};

const pageQuery = async (e) => {
  queryParams.pageNum = e.page;
  queryParams.pageSize = e.limit;
  refreshTable();
};

const search = () => {
  refreshTable();
};


const handleExport=()=>{
  downloadFile("/shipping/port/export", queryParams, `port.xlsx`);
}
 

const handleSortChange = async (column: any) => {
  queryParams.orderByColumn = column.prop;
  queryParams.isAsc = column.order; //动态取值排序顺序
  refreshTable();
};

const removeClickEvent = (id) => {
  ElMessageBox.confirm("Confirm to Remove the data？", "Confirmation Information", {
    type: "warning",
    confirmButtonText: "Confirm",
    cancelButtonText: "Cancel",
  }).then(async () => {
    await service.delete(`shipping/port/${id}`);

    refreshTable();
    // @ts-ignore
    ElNotification.success({
      title: "Prompt information",
      message: "Delete successfully!",
      position: "bottom-right",
    });
  });
};

const uploadFile = async (event) => {
  if (event.target == null || event.target.files[0] == null) {
    return;
  }
  const formData = new FormData();
  formData.append("file", event.target.files[0]);
  await service["post"]("shipping/port/uploadFile", formData);
};

onMounted(async () => {
  refreshTable();
});
</script>
<style lang="scss" scoped>
.el-table__expand-column .cell {
  display: none;
}
::v-deep.el-table td.el-table__cell div{
    text-align: center;
  }
.c-expand {
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.c-expand i {
  font-size: 16px;
}
.c-expand i.expand {
  font-size: 16px;
  transform: rotate(90deg);
  transition: all 0.25s;
}
</style>
